<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>作业提交系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      margin: 0;
      background-color: #f4f4f9;
      padding-top: 20px;
    }
    h2 {
      font-size: 2em;
    }
    .task-input {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
      width: 100%;
      max-width: 600px;
    }
    .task-input input,
    .task-input textarea {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      width: calc(50% - 5px);
      box-sizing: border-box;
    }
    .task-input button {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .task-input button:hover {
      background-color: #0056b3;
    }
    .task-list {
      width: 100%;
      max-width: 600px;
    }
    .task {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 10px;
    }
    .task h3 {
      margin: 0;
      flex-grow: 1;
    }
    .task button {
      padding: 5px 10px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      margin-left: 5px;
    }
    .edit-button {
      background-color: #28a745;
    }
    .submit-button {
      background-color: #ffc107;
    }
    .delete-button {
      background-color: #dc3545;
    }
    .empty-list {
      color: #999;
    }
    .success-message {
      color: green;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>作业提交系统</h2>
    <div class="task-input animate__animated animate__fadeIn">
      <input v-model="newTask.name" placeholder="作业名称">
      <textarea v-model="newTask.content" placeholder="作业内容"></textarea>
      <button @click="addTask">添加作业</button>
    </div>
    <div v-if="tasks.length === 0" class="empty-list animate__animated animate__fadeIn">
      暂无作业
    </div>
    <div v-for="(task, index) in tasks" :key="index" class="task animate__animated animate__fadeIn">
      <h3>{{ task.name }}</h3>
      <p>{{ task.content }}</p>
      <button class="edit-button" @click="editTask(index)">修改</button>
      <button class="submit-button" @click="toggleStatus(index)">{{ task.status === '未提交' ? '提交' : '未提交' }}</button>
      <button class="delete-button" @click="deleteTask(index)">删除</button>
    </div>
    <div v-if="submitMessage" class="success-message animate__animated animate__fadeIn">
      {{ submitMessage }}
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        newTask: { name: '', content: '' },
        tasks: [],
        submitMessage: ''
      },
      methods: {
        addTask() {
          if (this.newTask.name && this.newTask.content) {
            this.tasks.push({ ...this.newTask, status: '未提交' });
            this.newTask = { name: '', content: '' };
          }
        },
        editTask(index) {
          const task = this.tasks[index];
          const editedTask = prompt('编辑作业内容:', task.content);
          if (editedTask !== null) {
            this.tasks[index].content = editedTask;
          }
        },
        toggleStatus(index) {
          const task = this.tasks[index];
          task.status = task.status === '未提交' ? '已提交' : '未提交';
          this.submitMessage = task.status === '已提交' ? '提交成功' : '未提交';
          setTimeout(() => { this.submitMessage = ''; }, 1500);
        },
        deleteTask(index) {
          this.tasks.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>